<template>
  <div class="content">
    <el-card style="margin-bottom: 20px">
      <div style="display: flex; align-items: center; justify-content: space-between">
        <el-button type="primary" @click="addUserInfo">添加</el-button>
        <div>
          角色名称：
          <el-input v-model="params.roleName" style="width: 240px; margin-right: 20px" placeholder="请输入角色名称" />
          权限名称：
          <el-input v-model="params.roleKey" style="width: 240px; margin-right: 20px" placeholder="请输入权限名称" />
          <el-button @click="getNewUserInfo" type="primary">搜索</el-button>
          <el-button @click="clickReset">重置</el-button>
        </div>
      </div>
    </el-card>
    <el-card>
      <!-- 底部table列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column show-overflow-tooltip prop="roleName" label="角色名称" />
        <el-table-column show-overflow-tooltip prop="roleId" label="绑定角色ID" />
        <el-table-column show-overflow-tooltip prop="roleKey" label="角色权限" />
        <el-table-column label="状态">
          <template #default="scope">
            <el-tag :type="scope.row.status == 0 ? 'success' : 'info'">{{ scope.row.status == 0 ? "启用" : "禁用" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="createdTime" label="创建时间" />
        <el-table-column label="操作" width="240">
          <template #default="scope">
            <el-button size="small" @click="clickViewUserInfo(scope.row)" :icon="View">查看</el-button>
            <el-button size="small" @click="clickEditUserInfo(scope.row)" :icon="EditPen" type="primary">编辑</el-button>
            <el-popconfirm
              class="box-item"
              title="删除后将无法回复，是否删除"
              placement="top-end"
              @confirm="delUserInfo(scope.row)"
            >
              <template #reference><el-button size="small" :icon="Delete" type="danger">删除</el-button> </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page-content" v-if="total / params.pageSize > 1">
        <el-pagination
          background
          :total="total"
          layout="prev, pager, next"
          :page-size="params.pageSize"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 添加 / 编辑 -->
    <el-dialog v-model="userDrawerShow" :title="userType == 0 ? '添加角色' : userType == 1 ? '查看角色' : '编辑角色'" width="500">
      <el-form :model="userInfo" label-width="auto" :rules="rules" ref="userForm">
        <el-form-item label="角色名称：" prop="roleName">
          <el-input placeholder="请输入角色名称" v-model="userInfo.roleName" :disabled="userType == 1" />
        </el-form-item>
        <el-form-item label="角色权限：" prop="roleKey">
          <el-input placeholder="请输入角色权限" v-model="userInfo.roleKey" :disabled="userType == 1" />
        </el-form-item>
        <el-form-item label="状态：" prop="status">
          <el-select v-model="userInfo.status" placeholder="请选择状态" :disabled="userType == 1">
            <el-option label="启用" :value="0" />
            <el-option label="禁用" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="userType !== 1">
          <el-button @click="clickAddForm" style="flex: 1" type="primary">保存</el-button>
          <el-button @click="clickFormReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="js" name="userInfo">
import { ref } from "vue";
import { Delete, EditPen, View } from "@element-plus/icons-vue";
import { getNewAddRole, getNewEditRole, getNewDelRole, getNewRoleTreeList } from "@/api/modules/user";

const total = ref(0); // 总条数
const userType = ref(0);
const userForm = ref(null);
const tableData = ref([]); // 表格数据
const userDrawerShow = ref(false); // 抽屉显示隐藏

const userInfo = ref({
  userId: "",
  roleName: "",
  status: "",
  roleKey: ""
});
const rules = ref({
  roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
  roleKey: [{ required: true, message: "请输入角色权限", trigger: "blur" }],
  status: [{ required: true, message: "请选择状态", trigger: "blur" }]
});

// 查看
const clickViewUserInfo = row => {
  userInfo.value = row;
  userType.value = 1;
  userDrawerShow.value = true;
};

// 编辑
const clickEditUserInfo = row => {
  userInfo.value = row;
  userType.value = 2;
  userDrawerShow.value = true;
  console.log(userInfo.value);
};

// 删除
const delUserInfo = async row => {
  const res = await getNewDelRole({ roleId: row.roleId });
  if (res.code == 200) {
    getNewUserInfo();
  }
};

const params = ref({
  pageSize: 10,
  pageNo: 1,
  roleName: "",
  roleKey: ""
});

// 添加页码变化处理函数
const handleCurrentChange = currentPage => {
  // 更新当前页码参数
  params.value.pageNo = currentPage;
  // 重新加载数据
  getNewUserInfo();
};

// 重置
const clickReset = () => {
  params.value.roleKey = "";
  params.value.roleName = "";
};

// 重置表单
const clickFormReset = () => {
  userInfo.value = {
    roleName: "",
    status: "",
    roleKey: ""
  };
};

// 添加表单
const clickAddForm = async () => {
  const isValid = await new Promise(resolve => {
    userForm.value?.validate(valid => {
      resolve(valid);
    });
  });

  if (!isValid) return;

  if (userType.value == 0) {
    const res = await getNewAddRole(userInfo.value);
    if (res.code == 200) {
      userDrawerShow.value = false;
      getNewUserInfo();
    }
    return;
  }
  const resEdit = await getNewEditRole(userInfo.value);
  if (resEdit.code == 200) {
    userDrawerShow.value = false;
    getNewUserInfo();
  }
};

// 获取用户列表
const getNewUserInfo = async () => {
  const res = await getNewRoleTreeList(params.value);
  total.value = res.data.total;
  tableData.value = res.data.records;
};
getNewUserInfo();

// 添加用户
const addUserInfo = () => {
  userType.value = 0;
  userDrawerShow.value = true;
  userInfo.value.userId = "";
  userInfo.value.roleName = "";
  userInfo.value.roleKey = "";
  userInfo.value.status = "";
};
</script>
<style lang="scss" scoped>
.page-content {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
